<template>
  <div class="app-container">

    <div class="search-container">
      <div class="search-title">
        查询条件
      </div>
      <div class="search-form">
        <div class="form-row">
          <div class="form-column">
            <span class="column-title">姓名</span>
            <el-input v-model="queryParams.personnelName" placeholder="请输入" class="input-w150" clearable
              @keyup.enter.native="handleQuery" />
          </div>
          <div class="form-column">
            <span class="column-title">单位</span>
            <treeselect class="input-w150" v-model="queryParams.unitCode" :options="deptTreeList" :show-count="true"
              placeholder="请选择" />
          </div>
          <div class="form-column">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="body-container">
      <div class="operation-bar">
        <div class="bar-title">
          人才库列表
        </div>
      </div>

      <ul class="infinite-list" v-infinite-scroll="loading" style="overflow:auto">
        <li class="infinite-list-item"  v-for="(item,index) in dataList" :key="index">
          <el-card :body-style="{ padding: '0px' }" class="card" shadow="hover">
            <div class="content-wrapper" @click="handletToDetail(item)" style="cursor: pointer;">
              <img v-if="item.personnelPic" :src="item.personnelPic"
                class="image">
                <img v-else  class="image" src="../../../assets/images/avatar.png" alt="">
              <div class="info-wrapper">
                <span class="name">{{item.personnelName}}</span>
                <div class="dept">{{getDeptName(item.unitCode)}} </div>
                <div class="year">获得年份：{{ parseTime(item.createTime,'{y}')  }}</div>
              </div>
            </div>
            <div class="tag">
              <!-- {{  item.totalScore}} -->
              <!-- <div class="success" v-if="item.totalScore >= 85 ">优秀</div> -->
              <!-- <div class="warn" v-if="60 <= item.totalScore && item.totalScore < 85 ">良</div>
              <div class="danger" v-if="item.totalScore < 60 ">不合格</div> -->
            </div>
          </el-card>

        </li>
      </ul>
      <el-empty v-if="dataList.length == 0" description="暂无数据"></el-empty>

      <UserDetail :id="personnelId" :visible.sync="userDialog"></UserDetail>
    </div>

  </div>
</template>

<script>
import { talentList, deletePersonalTalent } from "@/api/talent";
import { getDeptName } from "@/utils/ruoyi";
import UserDetail from '@/components/userDetail.vue'
export default {
  components:{
    UserDetail
  },
  data () {
    return {
      personnelId:'',
      userDialog:false,
      dataList: [],
      loading: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,

      },
      form: {}
    };
  },
  computed: {
    deptTreeList () {
      return this.$store.state.user.deptTreeList
    },
    deptList () {
      return this.$store.state.user.deptList
    },
  },
  created () {
    this.getList()
  },
  methods: {
    handletToDetail(row){
      this.userDialog = true;
      this.personnelId = String(row.personnelId) 
    },
    getDeptName(id) {
      return getDeptName(this.deptList, id)
    },
    // 查询
    async getList () {
      this.loading = true;
      let params ={
        ...this.queryParams
      }
      const res = await talentList(params)
      this.loading = false;
      if (res.code === 200) {
        this.dataList = res.rows || [];
        this.total = res.total || 0;
      } else {
        this.dataList = [];
        this.total = 0;
      }
    },
    // 查询
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置
    resetQuery () {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      }
      this.handleQuery();
    },
     // 删除列表某一条数据
     handleDelete(row) {
      let that = this;
      this.$modal
        .confirm('是否确认删除？')
        .then(async function (res) {
          if (res == 'confirm') {
            let response = await deletePersonalTalent(row.id)
            if (response.code == 200) {
              that.$message.success('删除成功')
            } else {
              that.$message.error(response.msg)
            }
          }
        })
        .then(() => {
          this.getList();
        })
    },
  }
};
</script>
<style lang="scss" scoped>
.infinite-list {
  display: flex;
  flex-wrap: wrap;
  height:calc(100vh - 390px);
  justify-content: flex-start;
}

.card {
  width: 250px;
  height: 120px;
  margin-bottom: 18px;
  position: relative;
  margin: 10px;


  .content-wrapper {
    display: flex;
  }

  .tag {
    position: absolute;
    top: 0;
    right: 0;

    div {

      padding: 3px;
      color: #fff;
      text-align: center;
      font-size: 14px;
    }

    .success {
      background: #29F116;
    }

    .warn {
      background: #EA620F;
    }

    .danger {
      background: #DC3030;
    }
  }

  .image {
    height: 100%;
    width: 120px;
  }

  .info-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;

    .name {
      font-size: 18px;
    }

    .dept,
    .year {
      font-size: 12px;
      margin-top: 8px;
      color: #979797;
    }

  }
}
</style>